<template>
  <div id="app">
    <digital-clock
      :showSeconds="showSeconds"
      :show24hour="show24hour"
      :showampm="showampm"
      :showDate="showDate"
      :showWeekends="showWeekends"
      :showYear="showYear"
    ></digital-clock>
    <time-ctrl
      :showSeconds="showSeconds"
      :show24hour="show24hour"
      :showampm="showampm"
      @updateShowSeconds="updateShowSeconds"
      @updateShow24hour="updateShow24hour"
      @updateShowampm="updateShowampm"
    ></time-ctrl>
    <date-ctrl
      :showDate="showDate"
      :showWeekends="showWeekends"
      :showYear="showYear"
      @updateShowDate="updateShowDate"
      @updateShowWeekends="updateShowWeekends"
      @updateYear="updateYear"
    ></date-ctrl>
  </div>
</template>

<script>
import moment from 'moment'
import DigitalClock from './components/DigitalClock'
import TimeCtrl from './components/TimeCtrl'
import DateCtrl from './components/DateCtrl'

//moment.locale('zh-cn');

export default {
  name: 'app',
  components: {
    DigitalClock,
    TimeCtrl,
    DateCtrl
  },
  data () {
    return {
      showSeconds: true,
      show24hour: true,
      showampm: true,
      showDate: true,
      showWeekends: true,
      showYear: true
    }
  },
  methods: {
    updateShowSeconds(val) {
      this.showSeconds = val;
    },
    updateShow24hour(val) {
      this.show24hour = val;
    },
    updateShowampm(val) {
      this.showampm = val;
    },
    updateShowDate(val) {
      this.showDate = val;
    },
    updateShowWeekends(val) {
      this.showWeekends = val;
    },
    updateYear(val) {
      this.showYear = val;
    },
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
